<template>
	<view class="index-content" v-if="loadEnd">
		<!-- 头部 -->
		<view class="header-cont">
			<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" circular>
				<swiper-item v-for="item in swiperList" :key="item.id">
					<!-- <image src="/static/forum/banner.png" mode="aspectFit"></image> -->
					<image :src="item.image" mode="aspectFill"></image>
					<!-- <image :src="adminImgPath + '/' + item.image" mode="aspectFill"></image> -->
				</swiper-item>
			</swiper>
		</view>


		<view class="ikz-notice">
        <ikz-notice :show-data="screen_data" @openScreen="openScreen"></ikz-notice>
      </view>


		<!-- 导航栏 -->
		<view class="nav-cont">
			<view class="nav-data" v-for="item in nav_Data" :key="item.id">
				<view class="data-title" :class="{ active: newIndex == item.id }" @click="changeTitle(item.id)">{{ item.title }}</view>
			</view>
		</view>

		<!-- 主题内容 -->
		<view class="main-cont">
			<mainList :show-data="postsList" @likePosts="likePosts"></mainList>
			<view class="" style="margin: 10rpx 0;color: #656565;font-size: 26rpx;text-align: center;" v-if="postsList.length != 0 && !hasMore">没有更多了~</view>
		</view>

		<!-- 返回主页 -->
		<!-- <view class="gohome" @click="goHome()"><image src="/static/login/tohome.png" mode="aspectFit"></image></view> -->

		<!-- 缺省 -->
		<view class="default-height" style="width: 100%;height: 92rpx;"></view>
		<ikz-tabbar :show-data="tabbar_Data"></ikz-tabbar>

		<ikz-screen :show-data="screen_data" @closeScreen="closeScreen"></ikz-screen>
		
	</view>
</template>

<script>
import ikzTabbar from '@/pages/Component/Public/tab-bar/tab-bar.vue'
import mainList from '@/pages/Component/forum/component/main-list/mainList.vue'
import ikzNotice from "@/pages/Component/Public/Notice/public/notice/notice.vue";
import ikz from '@/pages/Common/tools.js'
import ikzScreen from "@/pages/Component/Public/Screen/public/screen/screen.vue";
var app = getApp()
export default {
	components: {
		ikzTabbar,
		mainList,
		ikzNotice,
		ikzScreen
	},
	data() {
		return {
			screen_data: {},
			loadEnd:false,
			adminImgPath: app.globalData.adminImgPath,
			newIndex: 1,
			nav_Data: [
				{
					id: 1,
					title: '最新',
				},
				{
					id: 2,
					title: '推荐',
				},
			],
			tabbar_Data: {
				type: 0,
				list: [
					{
						title: '首页',
						url: '/pages/Component/forum/Program/index/index',
						iconPath: '/static/forum/tabbar/index.png',
						selectedIconPath: '/static/forum/tabbar/index-check.png',
						status: 1,
					},
					{
						title: '频道',
						url: '/pages/Component/forum/Program/circle/circle',
						iconPath: '/static/forum/tabbar/circle.png',
						selectedIconPath: '/static/forum/tabbar/circle-check.png',
						status: 1,
					},
					{
						title: '发布',
						url: '/pages/Component/forum/Program/release/release',
						iconPath: '/static/forum/tabbar/release.png',
						selectedIconPath: '/static/forum/tabbar/release-check.png',
						status: 1,
					},
					{
						title: '我的',
						url: '/pages/Component/forum/Program/personal/personal',
						iconPath: '/static/forum/tabbar/mine.png',
						selectedIconPath: '/static/forum/tabbar/mine-check.png',
						status: 1,
					},
				],
			},
			swiperList: [], //轮播图列表
			postsList: [], //帖子列表

			page: 1,
			limit: 10,
			hasMore: false,
		}
	},
	onLoad() {
		this.loadEnd = false
		this.getSwiper()
		this.getPostsList()
	},
	onShow(){
		this.getPostsList()
		this.homeInfo();
	},
	onPullDownRefresh() {
		this.page = 1
		this.getPostsList()
	},
	onReachBottom() {
		if (this.hasMore) {
			this.page++
			this.getPostsList()
		}
	},
	methods: {
		//关闭公告
    closeScreen() {
      this.screen_data.show = false;
    },
	 //获取首页信息
    homeInfo(fn) {
      var path = "/xyb/mp_weixin_home/index";
      var url = app.globalData.adminPath + path;
      var _that = this;
      uni.request({
        url: url,
        header: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
        data: {
          agent_id: uni.getStorageSync("default_agent").id || "",
        },
        method: "POST",
        success: function (res) {
          if (res.data.code == 1) {
            _that.apply_receive_image_show =
              res.data.data.apply_receive_image_show;
            _that.ad_data = res.data.data.advertise_list;
            _that.banner_data = res.data.data.carousel_list;
            _that.apply_image = res.data.data.apply_receive_image;
            var menu_temp = res.data.data.server_list;
            // _that.menu_data.list = [];
            // for (var i = 0; i < menu_temp.length; i++) {
            //   _that.menu_data.list.push({
            //     src: menu_temp[i].icon_image,
            //     title: menu_temp[i].server_name,
            //     url: menu_temp[i].url,
            //   });
            // }
            _that.screen_data = {
              title: res.data.data.notice_title,
              content: res.data.data.notice_content,
              show: false,
            };
            _that.$forceUpdate();
          } else {
            uni.showModal({
              title: "提示",
              content: res.data.msg,
              showCancel: false,
              success: function (res) { },
            });
          }
          fn();
        },
        fail: function (res) {
          //调用接口失败或回传失败
          uni.showModal({
            title: "服务器繁忙",
            content: "服务器繁忙或网络不稳定，请稍后再试！",
          });
        },
      });
    },
    //打开公告
    openScreen() {
      this.screen_data.show = true;
    },
		// 切换分类
		changeTitle(id) {
			this.newIndex = id
			uni.showLoading({
				mask: true,
			})
			this.page = 1
			this.getPostsList()
		},
		// 返回主页
		goHome() {
			uni.switchTab({
				url: '/pages/Home/index',
			})
		},
		// 获取轮播图
		getSwiper() {
			let path = '/xyb/posts/posts_carousel/index'
			let data = {}
			ikz.requestPost(path, data, res => {
				if (res.statusCode == 200) {
					// console.log(res.data.data);
					this.swiperList = res.data.data.carousel_list
				}
			})
		},

		// 获取最新或推荐帖子
		getPostsList() {
			let path = '/xyb/posts/posts/index'
			let data = {
				token: uni.getStorageSync('local_user_session'),
				recommend: this.newIndex - 1,
				page: this.page,
				limit: this.limit,
			}
			ikz.requestPost(path, data, res => {
				if (res.statusCode == 200) {
					console.log('获取最新或推荐帖子', res.data)
					let postsList = []
					postsList = res.data.data.data
					postsList.forEach(el => {
						if (el.images.length != 0) {
							el.imagesNum = el.images.length
							if (el.images.length > 3) {
								el.images.slice(0, 3)
							}
						}
					})
					this.postsList = this.page == 1 ? postsList : [...this.postsList, ...postsList]
					this.hasMore = this.page < res.data.data.count / this.limit ? true : false
				}
				this.loadEnd = true
				uni.hideLoading()
				uni.stopPullDownRefresh()
			})
		},
		// 点赞或取消点赞帖子
		likePosts(id, status) {
			let path = ''
			if (status == 0) {
				path = '/xyb/posts/posts/give'
			} else {
				path = '/xyb/posts/posts/give_del'
			}
			let data = {
				token: uni.getStorageSync('local_user_session'),
				posts_id: id,
			}
			ikz.requestPost(path, data, res => {
				if (res.statusCode == 200) {
					// console.log(res.data.data);
					this.postsList.forEach(el => {
						if (el.id == id) {
							if (el.give_status == 0) {
								el.give_status = 1
								el.give++
							} else {
								el.give_status = 0
								el.give--
							}
						}
					})
					let title = ''
					if (status == 0) {
						title = '点赞成功'
					} else {
						title = '取消点赞'
					}
					uni.showToast({
						title,
						icon: 'none',
					})
				}
			})
		},
	},
}
</script>

<style lang="scss">
/* 颜色变量 */
$primary-color: #333;
$secondary-color: #f8f8f8;
$active-color: #000;
$text-color: #555;
$border-radius: 10rpx;
$shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

.ikz-notice{
	position: relative;
	right: 15rpx;
}
page {
  background-color: $secondary-color;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.index-content {
  width: 100%;
  padding: 26rpx;
  box-sizing: border-box;
  background-color: $secondary-color;
  min-height: 100vh;
  padding-bottom: 106rpx;

  .header-cont {
    width: 100%;
    height: 280rpx;
    margin-bottom: 20rpx;
    border-radius: $border-radius;
    overflow: hidden;
    box-shadow: $shadow;

    swiper {
      width: 100%;
      height: 100%;

      image {
        width: 100%;
        height: 100%;
        border-radius: $border-radius;
      }
    }
  }

  .nav-cont {
    width: 100%;
    padding: 20rpx 0;
    display: flex;
    background-color: $secondary-color;
    position: sticky;
    top: 0;
    z-index: 10;

    .nav-data {
      margin-right: 30rpx;

      .data-title {
        font-size: 30rpx;
        color: $text-color;
        transition: all 0.3s ease;
        padding-bottom: 8rpx;
        position: relative;

        &.active {
          font-size: 34rpx;
          color: $active-color;
          font-weight: 600;

          &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 4rpx;
            background-color: $active-color;
            border-radius: 2rpx;
          }
        }
      }
    }
  }

  .main-cont {
    margin-top: 20rpx;
    background-color: $secondary-color;

    .no-more {
      margin: 20rpx 0;
      color: #656565;
      font-size: 26rpx;
      text-align: center;
    }
  }

  .gohome {
    position: fixed;
    top: 70%;
    right: 30rpx;
    z-index: 100;
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: $shadow;
    display: flex;
    justify-content: center;
    align-items: center;

    image {
      width: 100rpx;
      height: 100rpx;
    }
  }

  .default-height {
    width: 100%;
    height: 92rpx;
  }
}
</style>